<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .query{
            border:1px solid #ccc;
            margin-bottom: 5px;
            height: 30px;
            padding-top:4px;
            padding-left:4px;
            text-align:center;
        }
        #usertable{
            width:100%;
        }
        #usertable ,#usertable td,#usertable th{
            border:1px solid #ccc;
            border-collapse:collapse;
        }
        #usertable td{
            text-align:center;
        }
        #usertable tr:hover{
            background-color:#f7fd82;
            cursor: pointer;
        }
        .gbtn_curd{
            float: left;
        }
        .gbtn_page{
            float: right;
        }
        #btn_query{
            margin-left:10px;
        }
    </style>
    <script>
        function insertuser(){
let shuju=[];
shuju[0]=document.getElementById("username").value;
shuju[1]=document.getElementById("password").value;
shuju[2]=document.getElementById("man").checked?"男":"女";
shuju[3]=document.getElementById("email").value;
let tbodynode=document.getElementById("tbodyldc");
let row=tbodynode.insertRow(tbodynode.rows.length);
row.setAttribute("row-id",tbodynode.rows.length);
let cell0=row.insertCell(0);

let input=document.createElement("input");
input.type="checkbox";
input.name="trcheck";
cell0.appendChild(input);
let count=1;
shuju.forEach((item)=>{
            let cell=row.insertCell(count);
            cell.innerHTML=item;
            count++
        });

document.getElementById("zhucekuai").hidden=true;
document.getElementById("userkuai").hidden=false;

}
         function deleteuser() {
             
            let allcheck= document.getElementsByName("trcheck");
            let pad="";
            [...allcheck].filter(item=>item.checked==true).forEach((itemd)=>{
                if(pad==""){
                   
                    pad+=itemd.value;
                }else{
                    pad+=",";
                    pad+=itemd.value;
                    
                }
            });
           if(pad!=""){
               if(confirm("请确认是否删除")){
                let array=pad.split(",");
            array.forEach((item)=>{
                
                let rowindex=document.querySelector(`[row-id='${item}']`).rowIndex;
                document.getElementById("tbodyldc").deleteRow(rowindex-1);

            });
               }
          
           }else{
               alert("请选择要删除的行");
         
           }
         


         };
        function init(){
            document.getElementById("submit_tijiao").addEventListener("click",insertuser,false);
            document.getElementById("deleteusers").addEventListener("click",deleteuser,false);
            document.querySelectorAll("#usertable tbody")[0].addEventListener("click",(event)=>{
            if(event.target.nodeName!="INPUT"){
                let node=event.target.parentNode.firstElementChild.firstElementChild;
                if(node.checked==true){
                    node.checked=false;
                }else{
                    node.checked=true;
                }
            }

        },false);

            document.getElementById("xuanzeall").addEventListener("click",()=>{
                let flag=document.getElementById("xuanzeall").checked;
                let arrays=document.getElementsByName("trcheck");
               
                arrays.forEach((lime)=>{
                    lime.checked=flag;
                });
            },false);
          

           document.getElementById("return").addEventListener("click",()=>{
            document.getElementById("zhucekuai").hidden=true;
            document.getElementById("userkuai").hidden=false;
           },false);
         
            document.getElementById("tianjia").addEventListener("click",()=>{
            document.getElementById("zhucekuai").hidden=false;
            document.getElementById("userkuai").hidden=true;

        },false);
       
           document.getElementById("tbodyldc").addEventListener("dblclick",(event)=>{
               let rtnode=event.target;
              
               let  input=document.createElement("input");
               input.type="text";
               input.value=rtnode.innerHTML;
           
              input.addEventListener("blur",(event)=>{
                  
                  let father=event.target.parentNode;
              
                  father.innerHTML=event.target.value;
                
              },false);
              rtnode.innerHTML="";
              rtnode.appendChild(input);
              
              input.focus();//获取焦点
           
           },false);

        }
        window.addEventListener("load",init,false);
    </script>
</head>

<body>
    <section id="zhucekuai" hidden>
        <table>
            <tbody>
                <tr>
                    <td><label for="userName">用户名：</label></td>
                    <td><input type="text" name="userName" id="username"></td>

                </tr>

                <tr>
                    <td><label for="userName">密码：</label></td>
                    <td><input type="password" name="password" id="password"></td>
                    <td>
                        <nav class="error_block">
                            <div class="error_img"></div>
                            <div class="error_msg"></div>
                        </nav>
                    </td>
                </tr>
                <tr>
                    <td>性别：</td>
                    <td colspan="2">
                        <input type="radio" name="sex" value="1" id="man">
                        <label for="man">男</label>&nbsp;
                        <input type="radio" name="sex" value="2" id="woman">
                        <label for="woman">女</label>
                    </td>
                </tr>
                <tr>
                        <tr>
                                <td><label for="userName">email：</label></td>
                                <td><input type="email" name="email" id="email"></td>
                                <td>
                                    <nav class="error_block">
                                        <div class="error_img"></div>
                                        <div class="error_msg"></div>
                                    </nav>
                                </td>
                            </tr>
                <tr>
                    <td colspan="2">
                        <button id="return">返回</button>

                        <button id="submit_tijiao">提交</button>
                    </td>

                </tr>
            </tbody>
        </table>
    </section>
    <section id="userkuai">
        <nav class="query">
            <input type="search" name="keyword"><button id="btn_query">查询</button>
        </nav>
        <table id="usertable">
            <thead>
                <tr>
                    <th><input type="checkbox" id="xuanzeall"></th>
                    <th>用户名</th>
                    <th>密码</th>
                    <th>性别</th>
                    <th>email</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <td colspan="5">
                        <nav class="gbtn_curd">
                            <button id="tianjia">新增</button>
                            <button>修改</button>
                            <button id="deleteusers">删除</button>
                        </nav>
                        <nav class="gbtn_page">
                            首页&nbsp;上一页&nbsp;
                            <select></select>&nbsp;
                            下一页&nbsp;尾页
                        </nav>
                    </td>
                </tr>
            </tfoot>
            <tbody id="tbodyldc">
                <tr row-id="1">
                    <td><input type="checkbox" value="1" name="trcheck"></td>
                    <td colspan="1" name="123">admin</td>
                    <td>admin</td>
                    <td>男</td>
                    <td>admin@qq.com</td>
                </tr>
                <tr row-id="2";>
                    <td><input type="checkbox" value="2" name="trcheck"></td>
                    <td>test</td>
                    <td>test</td>
                    <td>女</td>
                    <td>test@qq.com</td>
                </tr>
                <tr row-id="3";>
                    <td><input type="checkbox" value="3" name="trcheck"></td>
                    <td>test01</td>
                    <td>test01</td>
                    <td>女</td>
                    <td>test01@qq.com</td>
                </tr>
                <tr row-id="4";>
                    <td><input type="checkbox" value="4" name="trcheck"></td>
                    <td>manager</td>
                    <td>manager</td>
                    <td>男</td>
                    <td>manager@qq.com</td>
                </tr>
            </tbody>
        </table>

    </section>

</body>

</html>